<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>轮播图</title>
</head>
<body>
	<link rel="stylesheet" typr="text/css" href="../css/changebackground.css">
	<link rel="stylesheet" typr="text/css" href="../css/Eject.css">
	<link rel="stylesheet" typr="text/css" href="../css/index.min.css">
<!-- 轮播边上 -->
<div class="home-hero-container container">
<div id="banner">
   <div id="category">
				<ul>
					<li>
						<a href="">手机&nbsp;电话卡</a>
						<b></b>
					</li>
					<li>
						<a href="">电视&nbsp;盒子</a>
						<b></b>
					</li>
					<li>
						<a href="">笔记本&nbsp;平板</a>
						<b></b>
					</li>
					<li>
						<a href="">家电&nbsp;插线板</a>
						<b></b>
					</li>
					<li>
						<a href="">智能&nbsp;路由器</a>
						<b></b>
					</li>
					<li>
						<a href="">电源&nbsp;配件</a>
						<b></b>
					</li>
					<li>
						<a href="">健康&nbsp;儿童</a>
						<b></b>
					</li>
					<li>
						<a href="">耳机&nbsp;音响</a>
						<b></b>
					</li>
					<li>
						<a href="">生活&nbsp;箱包</a>
						<b></b>
					</li>
				</ul>
	</div>
        <div class="img-wrap">
            <ul>
                <!--无序列表-->
                <li class="item" style="display:block">
                    <img src="../img/xmad_15520120652601_RLJoK.jpg" width="1226px" height="460px" alt="">
                </li>
                <li class="item">
                    <img src="../img/xmad_15518572622351_nxucO.jpg" width="1226px" height="460px" alt="">
                </li>
                <li class="item">
                    <img src="../img/xmad_1551752390586_mpbwK.jpg" width="1226px" height="460px" alt="">
                </li>
                <li class="item">
                    <img src="../img/xmad_15484281983949_byTuq.jpg" width="1226px" height="460px" alt="">
                </li>
                <li class="item">
                    <img src="../img/xmad_15489036241498_XVwut.jpg" width="1226px" height="460px" alt="">
                </li>
            </ul>
        </div>
        <div class="lr-tab">
            <img src="../img/zuo.png" alt="" class="zuo-btn">
            <img src="../img/you.png" alt="" class="you-btn">
        </div>
        <div class="tab-btn">
            <ul>
                <li class="btn active"></li>
                <li class="btn"></li>
                <li class="btn"></li>
                <li class="btn"></li>
                <li class="btn"></li>
            </ul>
        </div>
    </div>
</div>    
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        var index = 0;//初始话一个变量 指向下标
        $(".tab-btn .btn").click(function () {
            index = $(this).index();//获取点击元素的下标
            $(this).addClass("active").siblings().removeClass("active");
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            //eq方法 找到第 下标 个图片，让他淡入,
            //同时为了避免每张图片只能点击一次，所以找到其他图片，让他们淡出
            // alert(index);
        });//通过点击事件 点击到小按钮
        //siblings().  当我们点击给他添加样式的时候，
        //找到除了点击以外的其他的兄弟元素，删除他的class名字
        $(".lr-tab .you-btn").click(function () {
            index++;//下标变大
            if (index > 4) {
                index = 0;
            }
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            //找到图片，找到现在index指向的那张图片，让他淡入，并将其他的图片淡出
            $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
            //这里和之前类似，找到当前下标的按钮，给他添加显示样式，给其他兄弟移除样式。
        });//通过点击事件 点击到小按钮
        //siblings().  当我们点击给他添加样式的时候，
        //找到除了点击以外的其他的兄弟元素，删除他的class名字
        $(".lr-tab .zuo-btn").click(function () {
            index--;
            if (index < 0) {
                index = 4;
            }
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            //找到图片，找到现在index指向的那张图片，让他淡入，并将其他的图片淡出
            $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
            //这里和之前类似，找到当前下标的按钮，给他添加显示样式，给其他兄弟移除样式。
        });//通过点击事件 点击到小按钮
        //siblings().  当我们点击给他添加样式的时候，
        //找到除了点击以外的其他的兄弟元素，删除他的class名字
        var timer = setInterval(function () {
            index++;//下标变大
            if (index > 4) {
                index = 0;
            }
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            //找到图片，找到现在index指向的那张图片，让他淡入，并将其他的图片淡出
            $(".tab-btn .btn").eq(index).addClass("active").siblings().removeClass("active");
            //这里和之前类似，找到当前下标的按钮，给他添加显示样式，给其他兄弟移除样式。
            //通过点击事件 点击到小按钮
        //siblings().  当我们点击给他添加样式的时候，
        //找到除了点击以外的其他的兄弟元素，删除他的class名字
        }, 3000);//定时器
    </script>
</body>
</html>